<template>
    <div>
        <el-dialog :title="isShowt.titlet" @close='closeFun' :visible.sync="isShowt.isShow">
            <div class="box">
                <div class="div">
                    <el-input v-model="input" placeholder="请输入分类名称"></el-input>
                    <el-button type="primary" @click="seachFun" icon="el-icon-search">搜 索</el-button>
                </div>
                <div>全部图片
                    <el-tree
                     :data="data" 
                     :props="defaultProps" 
                     @node-click="handleNodeClick"></el-tree>
                </div>
                <div class="divBtn">
                    <el-button type="primary"
                     @click="isShowt.titlet==='请选择用户头像'?shiFun():shiFun1()" 
                     :disabled="idArr.length<=0?true:false">使用选中的图片</el-button>
                    <el-upload
                        action=""
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                        <el-button type="primary">点击上传</el-button>
                    </el-upload>
                    <el-button type="success" @click="addlistFun">添加分类</el-button>
                    <el-button type="danger" @click="deleFun" :disabled="idArr.length<=0?true:false">删除图片</el-button>
                    <el-select v-model="value1"  placeholder="图片移动至">
                        <el-option
                            style="height:auto"
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                                <el-tree
                                    :data="data" 
                                    :props="defaultProps" 
                                    @node-click="yiFun"
                                    ></el-tree>
                        </el-option>
                    </el-select>
                </div>
                <div class="divs">
                    <img v-for="(v,i) in list1" 
                    @click="imgFun(v)" :key='i' 
                    :class="idArr.includes(v.att_id)==true?'on':''"
                    :src='v.att_dir'>
                </div>
                 <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page1"
                    :page-size="limit1"
                    layout="total, prev, pager, next, jumper"
                    :total="count1">
                </el-pagination>
            </div>
            
        </el-dialog>
        <!-- 添加分类 -->
        <el-dialog :title="title1" :visible.sync="dialogFormVisible1">
             <div class="dialogdiv">
                <span>{{addlist.title}}</span>
                <el-select v-model="value" @change="changeFun1">
                <el-option
                v-for="item in addlist.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option> 
            </el-select>
            </div>
            <div class="dialogdiv">
                <span>{{addlist1.title}}</span>
                <el-input style="width:490px" v-model="inputlist" :type="addlist1.type" placeholder="请输入分类名称"></el-input>
            </div>
            <div><el-button type="primary" class="btn" @click="btnQue">确 定</el-button></div>
        </el-dialog>
    </div>
</template>
<script>
import {image,imagelist,imagedelet,imagecreated,listAdd,upimg,yiimg,listseach} from '../api/index'
export default {
    props:['isShowt'],
    data() {
        return {
           name:'',
           input:'' ,
           options: [{
               value:'',
               label:''
           }],
           inputlist:'',
           options2:[],
           value:'',
           value1:'',
           data: [],
           defaultProps: {
                children: 'children',
                label: 'name'
            },
            dialogFormVisible1:false,
            formLabelWidth:'120px',
            pid:0,
            page1:1,
            limit1: 12,
            count1:0,
            list1:[],
            idArr:[],
            form:{
                input:'',
                value:''
            },
            title1:'',
            addlist:[],
            addlist1:[],
            imgArr:[]
        }
    },
    methods: {
        // 点击搜索
        seachFun(){
            listseach(this.input).then((res)=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.data=res.data.data.list
                }
            })
        },
        // 用户头像使用选中图片
        shiFun(){
            if(this.imgArr.length>=2){
                this.$message({
                    message: '最多只能选一张',
                    type: 'error',
                    duration:1000
                });
            }else{
                this.isShowt.isShow=false
                this.$emit('imgArr',{isShow:this.isShowt.isShow,imgArr:this.isShowt.imgArr})
                this.isShowt.imgArr=[]
                this.idArr=[]
            }
        },
        // 评价图片使用选中图片
        shiFun1(){
            if(this.imgArr.length>=2){
                this.$message({
                    message: '最多只能选一张',
                    type: 'error',
                    duration:1000
                });
            }else{
                this.isShowt.isShow=false
                this.$emit('imgArr1',{isShow:this.isShowt.isShow,imgArr:this.isShowt.imgArr})
                this.isShowt.imgArr=[]
                this.idArr=[]

            }
        },
        // 上传图片
         beforeAvatarUpload(file) {
             let fordate=new FormData()
             fordate.append('pid',0)
             fordate.append('file',file)

             upimg(fordate).then((res)=>{
                if(res.data.status==200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000
                    });
                    this.imglistFun()
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000
                    });
                    this.imglistFun()
                }
            })
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 添加分类获取数据
        addlistFun(){
            this.inputlist=''
            this.dialogFormVisible1=true
            imagecreated().then((res)=>{
                if(res.data.status==200){
                    this.addlist=res.data.data.rules[0]
                    this.addlist1=res.data.data.rules[1]
                    this.title1=res.data.data.title
                    this.value=res.data.data.rules[0].options[0].label
                }
            })
        },
        // 添加分类中上级分类下拉
        changeFun1(val){
            this.pid=val
        },
        // 添加分类确定按钮
        btnQue(){
            this.dialogFormVisible1=false
            listAdd({pid:this.pid,name:this.inputlist}).then((res)=>{
                if(res.data.status==200){
                     this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000
                    });
                    this.list()
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000
                    });
                }
            })
        },
        // 图片移动
        yiFun(val){
            if(this.idArr.length<=0){
                console.log(1);
                this.$message({
                    type: 'error',
                    message: '请选择图片',
                    duration:1000
                });
            }else{
                this.pid=val.id
                yiimg({pid:this.pid,images:this.idArr.join(',')}).then((res)=>{
                    if(res.data.status==200){
                        this.$message({
                            message: res.data.msg,
                            type: 'success',
                            duration:1000
                        });
                        this.list()
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration:1000
                        });
                    }
                })
            }
        },
        // 删除
        deleFun(){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                    duration:1000
                });
                imagedelet({ids:this.idArr.join(',')}).then((res)=>{
                    if(res.data.status==200){
                        this.imglistFun()
                    }
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                    duration:1000
                });          
            });
        },
        // 点击图片
        imgFun(val){
            console.log(val.att_id);
            if (this.idArr.length === 0){
                this.idArr.push(val.att_id)
                this.isShowt.imgArr.push(val.att_dir)
            }else{
                this.idArr.forEach((v,i) => {
                    if (this.idArr.includes(val.att_id)) {
                        if (v === val.att_id) {
                            this.idArr.splice(i,1)
                            this.isShowt.imgArr.splice(i,1)
                        }
                    }else{
                        this.idArr.push(val.att_id)
                        this.isShowt.imgArr.push(val.att_dir)
                    }
                })
                
            }
        },
        // 全部图片树状图数据
        list(){
            imagelist().then((res)=>{
                if(res.data.status==200){
                    this.data=res.data.data.list
                }
            })
        },
        // 改变数据页码
        handleCurrentChange(val){
            this.page1=val
            this.imglistFun()
        },
        // 下一页
        nextclick(val){
            this.page1=val
            this.imglistFun()
        },
        // 上一页
        prevclick(val){
            this.page1=val
            this.imglistFun()
        },
        // 全部图片分类点击
        handleNodeClick(data) {
            this.pid=data.id
            this.imglistFun()
        },
        // 关闭遮罩层回调
        closeFun(){
            this.isShowt.isShow=false
            this.$emit('isShowS',this.isShowt.isShow)
        },
        // 图片全部分类
        imglistFun(){
            image({pid:this.pid,page:this.page1,limit:this.limit1}).then((res)=>{
                if(res.data.status==200){
                    this.list1=res.data.data.list
                    this.count1=res.data.data.count
                }
            })
        }

    },
    created() {
        this.list()
        this.imglistFun()
    },
}
</script>
<style lang="scss" scoped>
.box{
 width: 100%;
 height: 300px;
 overflow: auto;   
}
.box::-webkit-scrollbar{
    display: none;
}
.div{
    width: 100%;

    display: flex;
}
.divs{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
img{
    width: 100px;
    height: 100px;
    display: block;
    margin: 5px;
}
.dialogdiv{
    width:100%;
    height: 50px;
    display: flex;
    span{
        display: inline-block;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
}
.btn{
    width: 100%;
}
.on{
    border: 1px solid green;
}
.divBtn{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
</style>